<template>
	<!-- 最外部圆角 背景 -->
	<view class="seckill-body" :style="{backgroundImage:'url('+seckillImgArr[0].icon_url+')',
	borderRadius: `${borderRadius}rpx`}" >
	<!-- 顶部左右显示两张图片时 -->
		<view class="seckill-top1"  v-if="showTopImage ==true">
			<image :src="seckillImgArr[3].icon_url"></image>
			<image :src="seckillImgArr[4].icon_url"></image>
		</view>
		<!-- 顶部显示文字时 -->
		<view class="seckill-top" style="align-items: flex-end;" v-else>
			<text style="font-size:30rpx; font-weight: 600;">{{seckillFont[0]}}</text>			
			<view class="textbg" v-if="showTextBg">
				<text>{{seckillFont[1]}}</text>
			</view>
			<text style="font-size: 20rpx;color:#807D76;margin-left: 16rpx; line-height: 2;" v-else>{{seckillFont[1]}}</text>
		</view>
		<!-- 中间的图片与价格 -->
		<view class="seckill-center" v-if="showCenterImage ==false">
			<view class="seckill-center-left" >
				<image :src="seckillImgArr[1].icon_url"   @click="gotoDetail(seckillImgArr[1])"></image>
				<view class="seckill-price" :style="{background: bgPriceColor}" v-if="seckillImgArr[1].params.describe !== ''">
					￥<text>{{seckillImgArr[1].params.describe.substring(0, seckillImgArr[1].params.describe.indexOf('.'))}}</text>
					{{seckillImgArr[1].params.describe.slice(seckillImgArr[1].params.describe.indexOf('.'), seckillImgArr[1].params.describe.length)}}
				</view> 
			</view>
			<view class="seckill-center-right">
				<image :src="seckillImgArr[2].icon_url"  @click="gotoDetail(seckillImgArr[2])"></image>
				<view class="seckill-price" :style="{background: bgPriceColor}" v-if="seckillImgArr[2].params.describe !== ''">
					<!---->
					￥ <text>{{seckillImgArr[2].params.describe.substring(0, seckillImgArr[2].params.describe.indexOf('.'))}}</text> 
					{{seckillImgArr[2].params.describe.slice(seckillImgArr[2].params.describe.indexOf('.'), seckillImgArr[2].params.describe.length)}}
				</view>
			</view>
		</view>
		<!-- 当图片在背景上面时 -->
		<view class="seckill-center" v-else>
			<view class="seckill-centerbg-left"  :style="{backgroundImage:'url('+seckillImgArr[3].icon_url+')'}">
				<image :src="seckillImgArr[1].icon_url" @click="gotoDetail(seckillImgArr[1])"></image>
				<text>包邮</text>
			</view>
			<view class="seckill-centerbg-right" :style="{backgroundImage:'url('+seckillImgArr[3].icon_url+')'}">
				<image :src="seckillImgArr[2].icon_url" @click="gotoDetail(seckillImgArr[2])"></image>
				<text>包邮</text>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		name:"app-seckill",
		data() {
			return {
				// number1:this.seckillImgArr[2].params.describe
			};
		},
		props:{
			
			// 是否显示顶部图片
			showTopImage:{
				type:Boolean,
				default:true
			},
			// 底部是否有图片背景
			showCenterImage:{
				type:Boolean,
				default:false
			},
			// 圆角值
			borderRadius:{
				type:[String,Number],
				default:0
			},
			// 顶部文字 传两个值
			seckillFont:{
				type:Array,
				default:['今日爆款','尽享好物']
			},
			// 顶部文字右边背景
			showTextBg:{
				type:Boolean,
				default:false
			},
			// 价格 非必须 传递一个值 左右价格一样 传递两个时不一样
			seckillPrice:{
				type:[String,Number,Array],
				default:0
			},
			// 价格后背景图 无价格时不显示
			bgPriceColor:{
				type:String,
				default:'#c00000'
			},
			//背景 顶部 中间共5张图片
			seckillImgArr:{
				type:Array,
				default:[]	
			},			
		},
		mounted(){
			// console.log('--------------------------------seckillImgArr', this.seckillImgArr)
		},
		methods:{
			gotoDetail(item){
				uni.navigateTo({
					url:item.url
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
// @font-face {
// 	font-family:pricefont;
// 	// src: url("../../../static/font/DIN-Medium.otf");
// }
.seckill-body{
	width: 350rpx;
	height: auto;
	padding:20rpx 0;
	background-size: 100%;
	// background-repeat: no-repeat;
	.seckill-top1{
		width: 100%;
		height: 30rpx;
		margin-left: 16rpx;
		margin-bottom:14rpx ;
		display: flex;		
		image{
			width: 32%;	
			height: 100%;
			margin-left: 16rpx;
		}
		}
	.seckill-top{
		width: 100%;
		height: 30rpx;
		margin-left: 16rpx;
		margin-top:4rpx ;
		display: flex;		
		image{
			width: 40%;	
			margin-left: 16rpx;
		}
		.textbg{
			min-width: 140rpx;
			height: 32rpx;
			border-radius: 16rpx;
			background:linear-gradient(90deg, #F68345 0%, #F7BE67 100%) ;
			font-size: 20rpx;
			color:white;
			margin-left: 12rpx;
			text-align: center;
			margin-bottom:6rpx;
		}
	}
	.seckill-center{		
		margin-top: 12rpx;
		display: flex;
		justify-content:space-around;
		.seckill-center-left,.seckill-center-right{
			position: relative;
			width: 128rpx;
			height: 128rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			.seckill-price{
				width: 100%;
				height: 34rpx;
				position: absolute;
				bottom: 0;
				border-radius: 12px 12px 0 0;
				font-size: 20rpx;
				color: white;				
				text-align: center;
			
				text{
					color: white;
					font-size: 24rpx;
					font-weight: bold;
					
				}
			}
		}
		
		.seckill-centerbg-left,.seckill-centerbg-right{
			width: 160rpx;
			height: 192rpx;
			// background: url('../../../static/image/miaosha/今日特惠.png');
			color: white;
			display: flex;
			align-items: center;
			flex-direction: column;
			border-radius: 12rpx;
			image{
				width: 100%;
				height: 148rpx;
				border-radius: 16rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: 500;
				
			}
		}
		
		seckill-baoyou{
			height: 200rpx;
			width: 128rpx;
			background: red;
		}
		
	}
}
</style>